<template>
  <div class="wh-100 " style="background-color: white">
    <div class="w-100  bor-base-b d-flex-between-center pl-12 pr-12 ch50">
      <div class="fw-6 ctitle">{{ verifyForm.studentName || '' }}核查详情</div>
      <Button @click="$router.go(-1)" style="background-color: white">返回</Button>
    </div>
    <div class="w-100 h-95 pt-12">
      <div class="w-100 h-93  overflow-auto pl-12 pr-12">
        <table class="w-100">
          <tr class="w-100 tr01">
            <th colspan="4">学生基本信息</th>
          </tr>
          <tr class="w-100 tr02">
            <td class="w-20" style="color: black;font-weight: 600;">学校</td>
            <td class="w-30">{{ verifyForm.schoolName || '' }}</td>
            <td class="w-25">院系</td>
            <td class="w-25">{{ verifyForm.college || '' }}</td>
          </tr>
          <tr class="w-100 tr02">
            <td class="w-20" style="color: black;font-weight: 600;">专业</td>
            <td class="w-30">{{ verifyForm.profession || '' }}</td>
            <td class="w-25" >
              <span @click="employmentDestinations(verifyForm)" style="cursor: pointer;color: #0f83f9">{{parentTitle}}(点击查看去向信息)</span>
              <span style="cursor: pointer;color: #0f83f9;margin-left: 50px" @click="evidence(verifyForm)">去向证明材料(点击查看)</span>
            </td>
            <td class="w-25">{{ verifyForm.qxName }}</td>
          </tr>
          <tr class="w-100 tr02">
            <td class="w-20" style="color: black;font-weight: 600;">姓名</td>
            <td class="w-30">{{ verifyForm.studentName || '' }}</td>
            <td class="w-25">联系电话</td>
            <td class="w-25">{{ verifyForm.studentMobile || '' }}</td>
          </tr>
          <tr class="w-100 tr02">
            <td class="w-20" style="color: black;font-weight: 600;">单位名称</td>
            <td class="w-30">{{ verifyForm.enterpriseName || '' }}</td>
            <td class="w-25">单位联系电话</td>
            <td class="w-25">{{ verifyForm.enterpriseMobile || '' }}</td>
          </tr>
          <tr class="w-100 tr02">
            <td class="w-100" colspan="4" style="color: black;font-weight: 600;">核查信息</td>
          </tr>

          <tr class="w-100 tr02">
            <th rowspan="5" style="color: black;font-weight: 600;">材料核查</th>
            <td colspan="3" style="text-align: left">
              <div class="d-flex-align-center pl-56">
                <input type="radio" class="custom-radio" name="materialVerification" v-model="verifyForm.materialAudit"
                       value="1" />材料完整且与毕业去向一致
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="materialVerification" v-model="verifyForm.materialAudit" value="2"  />材料不完整
                </div>
                <div class="w-25">
                  <Input v-model="materialAuditMessageTwo"
                         @on-change="valueChange" size="small"
                         placeholder="请说明情况（必填项）" />
                </div>
                <p v-show="errIndex==1" class="red">材料不完整说明情况不能为空</p>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="materialVerification" v-model="verifyForm.materialAudit" value="3" />材料与毕业去向不一致
                </div>
                <div class="w-25">
                  <Input v-model="materialAuditMessageThree"
                         @on-change="valueChange" size="small"
                         placeholder="请说明情况（必填项）" />
                </div>
                <p v-show="errIndex==2" class="red">材料与毕业去向不一致说明情况不能为空</p>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="materialVerification" v-model="verifyForm.materialAudit" value="4" />其他情况，请说明
                </div>
                <div class="w-25">
                  <Input v-model="materialAuditMessageFour"
                         @on-change="valueChange" size="small"
                         placeholder="请说明情况（必填项）" />
                </div>
                <p v-show="errIndex==3" class="red">其他情况说明情况不能为空</p>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">

            </td>
          </tr>
          <tr class="w-100 tr02">
            <th rowspan="7" style="color: black;font-weight: 600;">学生电话核查</th>
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="studentPhoneVerification" v-model="verifyForm.studentAudit" value="1" />毕业去向信息无误
                </div>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="studentPhoneVerification" v-model="verifyForm.studentAudit" value="2" />毕业去向信息有误，曾经在此单位工作，目前未就业
                </div>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="studentPhoneVerification" v-model="verifyForm.studentAudit" value="3" />毕业去向信息有误，曾经在此单位工作，目前已换工作单位
                </div>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="studentPhoneVerification" v-model="verifyForm.studentAudit" value="4" />毕业去向信息有误，学生从未登记该毕业去向信息或该毕业去向信息与学生无关，目前已就业
                </div>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="studentPhoneVerification" v-model="verifyForm.studentAudit" value="5" />毕业去向信息有误，学生从未登记该毕业去向信息或该毕业去向信息与学生无关，目前未就业
                </div>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="studentPhoneVerification" v-model="verifyForm.studentAudit"  value="6" />其他情况，请说明
                </div>
                <div class="w-25">
                  <Input v-model="verifyForm.studentAuditMessage" @on-change="valueChange" size="small" placeholder="请说明情况（必填项）" />
                </div>
                <p v-show="errIndex==4" class="red">其他情况说明况不能为空</p>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="d-flex-align-center">

              </div>
            </td>
          </tr>
          <tr class="w-100  tr02">
            <th rowspan="7" style="color: black;font-weight: 600;">用人单位电话核查</th>
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="employerPhoneVerification" v-model="verifyForm.enterpriseAudit"  value="1" />毕业去向信息无误
                </div>
              </div>
            </td>
          </tr>
          <tr class="w-100  tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="employerPhoneVerification" v-model="verifyForm.enterpriseAudit" value="2" />学生与该单位签约过，但已解约或未入职
                </div>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="employerPhoneVerification" v-model="verifyForm.enterpriseAudit" value="3" />学生在该单位工作过，但已离职
                </div>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="employerPhoneVerification" v-model="verifyForm.enterpriseAudit" value="4" />该单位仅为学生的实习单位
                </div>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="employerPhoneVerification" v-model="verifyForm.enterpriseAudit" value="5" />该单位与学生没有任何关系
                </div>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12">
                  <input type="radio" name="employerPhoneVerification" v-model="verifyForm.enterpriseAudit" value="6" />其他情况，请说明
                </div>
                <div class="w-25">
                  <Input v-model="verifyForm.enterpriseAuditMessage"  @on-change="valueChange" size="small" placeholder="请说明情况（必填项）" />
                </div>
                <p v-show="errIndex==5" class="red">其他情况说明不能为空</p>
              </div>
            </td>
          </tr>
          <tr class="w-100 tr02">
            <td colspan="3" style="text-align: left">
              <div class="d-flex-align-center">
              </div>
            </td>
          </tr>
          <tr class="w-100 tr03">
            <th style="color: black;font-weight: 600;">其他方式请说明</th>
            <td colspan="3">
              <div class="wh-100 d-flex-align-center pl-56">
                <div class="d-flex-align-center mr-12 w-100">
                  <Input v-model="verifyForm.otherAudit" type="textarea" :rows="3" size="small"
                         placeholder="请说明情况" />
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div v-show="showBtn" class="w-100 d-flex-around-center ch50">
        <div>
          <Button @click="$router.go(-1)">取消</Button>
          <Button v-loading="submitLoading" @click="submitForm">提交</Button>
        </div>
      </div>
    </div>
    <el-image-viewer
        v-if="imgViewerVisible"
        :on-close="closeImgViewer"
        :url-list="imgList" />
  </div>

</template>
<script>
import { updateVal } from '../../util/ObjectUtil';
import {
  addDataAuditDataApi,
  getDataByIdApi,
  getDataByIdCardApi,
  getOneDataApi
} from '../../api/dataVerification/dataVerification';
import { employmentCategoryAPI } from '@/api/bys';
import { getDictDataByType } from '@/api';
import { getRequest } from '@/libs/axios';
import { getByIdCard } from '@/api/bys/jyqx/jyqx';

export default {
  data() {
    return {
      phone: '1',
      value: '',
      showBtn: false,
      submitLoading: false,
      verifyForm: {
        qxName: '',
        college: '',
        enterpriseAudit: '',
        enterpriseAuditMessage: '',
        enterpriseCode: '',
        enterpriseContact: '',
        enterpriseMobile: '',
        enterpriseName: '',
        graduationCode: '',
        idCard: '',
        materialAudit: '',
        materialAuditMessage: '',
        otherAudit: '',
        profession: '',
        schoolCode: '',
        schoolName: '',
        studentAudit: '',
        studentAuditMessage: '',
        studentCard: '',
        studentMobile: '',
        studentName: '',
        oneType: '',
        zmcl: '', // 证明材料 url用,号拼接的
      },
      materialAuditMessageTwo: '',
      materialAuditMessageThree: '',
      materialAuditMessageFour: '',
      list: [],
      qxList: [],
      idCard: '',
      id: '',
      errIndex : -1,
      jytype:[],
      imgViewerVisible:false,
      imgList:[ ],
      parentTitle:'毕业去向'
    };
  },
  methods: {
    submitForm() {
      let text = ''
      if ( this.verifyForm.materialAudit >1){
        if (this.verifyForm.materialAudit == 2) {
          this.verifyForm.materialAuditMessage =this.materialAuditMessageTwo
          text= '材料不完整'
          this.errIndex =1
        }
        if (this.verifyForm.materialAudit == 3) {
          this.verifyForm.materialAuditMessage =this.materialAuditMessageThree
          text='材料与毕业去向不一致'
          this.errIndex =2
        }
        if (this.verifyForm.materialAudit == 4) {
          this.verifyForm.materialAuditMessage = this.materialAuditMessageFour
          text='其他情况'
          this.errIndex =3
        }
        if (  !this.verifyForm.materialAuditMessage ) {
          this.$message.error('材料核查'+text+'，请说明情况')
          return;
        }
      }else {
        this.verifyForm.materialAuditMessage =''
      }
      if (this.verifyForm.enterpriseAudit ==6 &&!this.verifyForm.enterpriseAuditMessage) {
        this.$message.error('用人单位电话核查内其他情况，请说明情况')
        this.errIndex = 5
        return;
      }
      if (this.verifyForm.studentAudit ==6 &&!this.verifyForm.studentAuditMessage) {
        this.$message.error('学生电话核查内其他情况，请说明情况')
        this.errIndex =4
        return;
      }
      this.submitLoading = true;
      addDataAuditDataApi(this.verifyForm).then((res) => {
        if (res.success) {
          this.$message.success('核查成功');
        } else {
          this.$message.error('核查失败');
        }
      });
      this.submitLoading = false;
      this.$router.go(-1)
    },
    valueChange(e){
      if (e.target.value.length >= 1) {
        this.errIndex =-1
      }
    },
    geteMploymentCategory() {
      employmentCategoryAPI().then(res => {
        if (res.code == 200) {
          this.list = res.result;
        } else {
          this.$message(res.message);
        }
      });
    },
    getData() {
      console.log(this.id ,this.idCard);
      if (this.id) {
        getDataByIdApi({
          id: this.id
        }).then((res) => {
          if (res.success) {
            this.verifyForm = res.result;
            if (this.verifyForm.materialAudit == 2) {
              this.materialAuditMessageTwo = this.verifyForm.materialAuditMessage;
            }
            if (this.verifyForm.materialAudit == 3) {
              this.materialAuditMessageThree = this.verifyForm.materialAuditMessage;
            }
            if (this.verifyForm.materialAudit == 4) {
              this.materialAuditMessageFour = this.verifyForm.materialAuditMessage;
            }
          }
        });
      } else if (this.idCard) {
        getDataByIdCardApi({
          idCard: this.idCard
        }).then((res) => {
          if (res.success) {
            this.verifyForm = res.result;
          }
        });
      } else {
        this.$message.error('参数错误')
      }

    },
    getQxList() {
      getDictDataByType('qx').then((res) => {
        if (res.success) {
          this.qxList = res.result;
        }
      });
    },
    getMploymentText(val) {
      let title = '';
      this.qxList.forEach((item) => {
        if (item.value == val) {
          title = item.title;
        }
      });
      return title;
    },
    employmentDestinations(row) {
      console.log(row,444);
      this.$router.push({ name: 'JyqxManageEdit', params: { row }, query: { type: '2', idCard: row.idCard } });
    },
    //查看 去向证明材料
    evidence(row){
      if (row.zmcl ) {
        this.imgList = row.zmcl.split(",")
        this.showImgViewer()
      }else {
       this.$message.info('暂无证明材料')
      }
    },
    showImgViewer(){
      this.imgViewerVisible = true;
      const m = (e) => { e.preventDefault() };
      document.body.style.overflow = 'hidden';
      document.addEventListener("touchmove", m, false); // 禁止页面滑动

    },
    closeImgViewer(){
      this.imgViewerVisible = false;
      const m = (e) => { e.preventDefault() };
      document.body.style.overflow = 'auto';
      document.removeEventListener("touchmove", m, true);
    },
    async getjyType() {
      let jytype = []
      let res = await employmentCategoryAPI()
      if (res.success) {
        console.log(res.result, '就业类别');
         jytype = res.result;

      }
      return jytype
    },
    async getByIdCard(idCard){
      console.log(idCard,'idCard');
      getByIdCard({idCard}).then(async res=>{
        if (res.code == 200) {
         let jytype= await this.getjyType()
          let [arr] = jytype.filter(e => e.profCode ==  res.result.type);
         this.parentTitle  = arr ? arr.parentTitle : '毕业去向';

        }
      })
    }
  },

  components:{
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  mounted() {
    if (this.$route.query.type === '1') {
      this.showBtn = true;
    }
    this.idCard = this.$route.query.idCard;
    this.id = this.$route.query.id;
    this.geteMploymentCategory();
    this.getQxList();
    this.getData();
    this.getByIdCard( this.idCard)
  }
};
</script>

<style scoped lang="less">
.h-93 {
  height: 93%;
}

td, th {
  border: 1px solid #f2f2f2;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
}

.tr01 {
  height: 50px;
  line-height: 50px;
  background-color: #fafafa
}

.tr02 {
  height: 40px;
  line-height: 40px;
}

.tr03 {
  height: 90px;
  line-height: 30px;
}

.ch50 {
  height: 50px
}

.h-95 {
  height: 93%
}

.ctitle {
  font-size: 14px;
}
.red {
  padding-left:8px;
  color: #ed3f14;
}
</style>